<template>
  <div id="index_container">
    <!-- 使用图标库示例 -->
    <i class="iconfont icon-smile-fill "></i>
    <span>{{store.userInfo.userId}}</span>
    <span>{{store.userInfo.userName}}</span>
  </div>
</template>

<script lang="ts" setup>
// 演示使用模块化的axios进行请求
import { UserInfo } from '@/entity/userInfo'
import userApi from '@/request/api/api'
import { indexStore } from '@/store/IndexPinia'
import { ref, reactive, onMounted } from 'vue'
//使用pinia进行存储
const store = indexStore()
let res: Promise<UserInfo> = reactive({}) as Promise<UserInfo>

onMounted(() => {
  //发起请求
  res = userApi.api.getUserInfo('test')
  //如下可以进行打印
  console.log(res)

  //直接可以获取
  res.then(res => {
    store.userInfo = res
    console.log(store.userInfo)
  })
})
</script>

<style lang="scss" scoped>
@use './Index.scss';
#index_container {
  height: 100vh;
  width: 100vw;
}
</style>